<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="show ? rowObj.T1 : rowObj.F1" :xs="show ? rowObj.T2 : rowObj.F2">
        <workSiteLeft ref="workSiteLeft" :show="show" @showLeft="showLeft" @queryVal="queryVal" />
      </el-col>

      <el-col :span="show ? rowObj.T3 : rowObj.F3" :xs="show ? rowObj.T4 : rowObj.F4">
        <el-form :model="queryParamsTwo" ref="queryForm" size="mini" :inline="true" v-show="showSearch" style="display: flex;justify-content: space-between;">
          <div>
            <el-button style="margin-right: 6px" size="mini" :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'" circle @click="showLeft(show)"></el-button>
            <el-form-item label="试验类型" prop="type">
              <el-select clearable placeholder="请选择试验类型" v-model="queryParamsTwo.type">
                <el-option v-for="item in typeList" :key="item.val" :value="item.val" :label="item.name"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="处置状态">
              <el-select v-model="queryParamsTwo.disposalStatus" clearable size="mini" placeholder="请选择">
                <el-option v-for="item in dict.type.warning_disposal_status" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" v-hasPermi="['laboratoryManage:testSheetImport:query']">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </div>
          <el-form-item>
            <el-button type="danger" style="float: right;" plain icon="el-icon-delete" size="mini" :disabled="multiple"
                       @click="handleDelete" v-hasPermi="['laboratoryManage:testSheetImport:remove']">删除</el-button>
          </el-form-item>
        </el-form>

        <!-- <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" v-show="showSearch" style="display: flex;justify-content: space-between;">
          <div>
            <el-button style="margin-right: 6px" size="mini" :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'" circle @click="showLeft(show)"></el-button>
            <el-form-item label="姓名" prop="nickName">
              <el-input placeholder="请输入姓名" v-model="queryParams.nickName" clearable></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phonenumber">
              <el-input placeholder="请输入手机号" v-model="queryParams.phonenumber" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </div>
          <el-form-item>
            <el-button icon="el-icon-document-checked" type="success" size="mini" @click="handleSave">保存</el-button>
            <el-button type="danger" size="mini" @click="handleAnalysis">报警分析</el-button>
          </el-form-item>
        </el-form> -->
        <!-- <el-table tooltip-effect="dark" ref="multipleTable" border v-loading="loading" :data="cementDataList" size="mini" @selection-change="handleSelectionChange">
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column label="姓名" align="center">
            <template slot-scope="scope"><span>{{ scope.row.nickName || "-" }}</span></template>
          </el-table-column>
          <el-table-column label="职务" align="center">
            <template slot-scope="scope"><span>{{ scope.row.zw || "-" }}</span></template>
          </el-table-column>
          <el-table-column label="手机号" align="center">
            <template slot-scope="scope"><span>{{ scope.row.phonenumber || "-" }}</span></template>
          </el-table-column>
          <el-table-column label="所属单位" align="center">
            <template slot-scope="scope"><span>{{ scope.row.deptName || "-" }}</span></template>
          </el-table-column>
          <el-table-column label="预警类型" align="center">
            <template slot-scope="scope"><span>{{ scope.row.warnType || "-" }}</span></template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/> -->

        <el-table border v-loading="loadingTwo" :data="analysisList" size="mini" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="40" align="center" />
          <el-table-column label="序号" type="index" align="center" width="50" />
          <el-table-column label="试验类型" align="center" width="205" show-overflow-tooltip>
            <template slot-scope="scope"><span>{{ scope.row.typeName || "-" }}</span></template>
          </el-table-column>
          <el-table-column label="通知内容" align="center" show-overflow-tooltip>
            <template slot-scope="scope"><span>{{ scope.row.remark || "-" }}</span></template>
          </el-table-column>
          <el-table-column label="预警时间" align="center" width="165">
            <template slot-scope="scope"><span>{{ scope.row.insterTime || "-" }}</span></template>
          </el-table-column>
          <el-table-column label="处置状态" align="center" prop="disposalStatus" width="90">
            <template slot-scope="scope"><dict-tag :options="dict.type.warning_disposal_status" :value="scope.row.disposalStatus"/></template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="170">
            <template slot-scope="scope">
              <el-button size="mini" type="text" :disabled="!(scope.row.disposalStatus &&  scope.row.disposalStatus == 1 || scope.row.disposalStatus == 2 || scope.row.disposalStatus == 5)" @click="addDisposal(scope.row)" v-hasPermi="['laboratoryManage:testSheetImport:handle']">处置</el-button>
              <el-button size="mini" type="text" :disabled="!(scope.row.disposalStatus && scope.row.disposalStatus == 3)" @click="ensureDisposal(scope.row)" v-hasPermi="['laboratoryManage:testSheetImport:confirm']">确认</el-button>
              <el-button size="mini" type="text" :disabled="!(scope.row.disposalStatus && scope.row.disposalStatus == 3)" @click="withdraw(scope.row)" v-hasPermi="['laboratoryManage:testSheetImport:withdraw']">撤回</el-button>
              <el-button size="mini" type="text" :disabled="!(scope.row.disposalStatus && scope.row.disposalStatus != 1)" @click="handleDetails(scope.row)" v-hasPermi="['laboratoryManage:testSheetImport:details']">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 处置单 -->
        <Disposal ref="disposalSYS" :open="disposalVisibleSYS" :warning-id="warningIdSYS" :warning-type="warningTypeSYS" @getList="getAnalysisList" @closeDialog="closeFormSYS"></Disposal>
        <!-- 确认单 -->
        <disposal-confirm ref="disposalConfirmSYS" :open="disposalConfirmVisibleSYS" @getList="getAnalysisList" @closeDialog="closeConfirmSYS"></disposal-confirm>
        <!-- 详情 -->
        <disposal-confirm ref="disposalDetailsSYS" :open="disposalDetailsVisibleSYS" @getList="getAnalysisList" @closeDialog="closeDetailsSYS"></disposal-confirm>
        <pagination v-show="totalTwo > 0" :total="totalTwo" :page.sync="queryParamsTwo.pageNum" :limit.sync="queryParamsTwo.pageSize" @pagination="getAnalysisList" />
      </el-col>
    </el-row>

    <el-dialog title="报警分析" :visible.sync="analysisDialog" width="80%">
      <el-table border v-loading="loadingTwo" :data="analysisList" size="mini">
        <el-table-column label="序号" type="index" align="center" width="50" />
        <el-table-column label="试验类型" align="center" width="205" show-overflow-tooltip>
          <template slot-scope="scope"><span>{{ scope.row.typeName || "-" }}</span></template>
        </el-table-column>
        <el-table-column label="通知内容" align="center" show-overflow-tooltip>
          <template slot-scope="scope"><span>{{ scope.row.remark || "-" }}</span></template>
        </el-table-column>
        <el-table-column label="预警时间" align="center" width="165">
          <template slot-scope="scope"><span>{{ scope.row.insterTime || "-" }}</span></template>
        </el-table-column>
      </el-table>
      <pagination v-show="totalTwo> 0" :total="totalTwo" :page.sync="queryParamsTwo.pageNum" :limit.sync="queryParamsTwo.pageSize" @pagination="getAnalysisList" />

      <span slot="footer" class="dialog-footer">
        <el-button @click="analysisDialog = false" size="mini">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { alarmNotificationList, nWarningUserMessageEdit, warningSyList, remove } from "@/api/system/alarmNotification";
import workSiteLeft from "@/views/components/workSiteLeft";
import Disposal from '../../../views/zhgd/nWarningHnt/disposal.vue';
import DisposalConfirm from '../../../views/zhgd/nWarningHnt/disposalConfirm.vue';
import { getInfoByWarningId, handleRevoke } from "@/api/zhgd/nWarningHnt";

export default {
  name: "testSheetImport", //报警通知管理
  dicts: ["warning_disposal_status", 'warning_type'],
  data() {
    return {
      typeList:[
        {name:'万能材料试验机',val:'0'},
        {name:'压力机',val:'1'},
      ],
      analysisList: [],
      analysisDialog: false,
      multipleSelection: [],
      show: true,
      rowObj: {
        T1: 3,
        T2: 24,
        T3: 21,
        T4: 24,
        F1: 0,
        F2: 0,
        F3: 24,
        F4: 24,
      },
      detailsList: [], //详情列表
      queryParamsTwo: {
        pageNum: 1,
        pageSize: 10,
        disposalStatus: '',
      },
      totalTwo: 0,
      loadingTwo: false,
      constructionList: [], //工地列表
      rowDetailsDialog: false,
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 水稳拌合站数据表格数据
      cementDataList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 接收首页跳转传过来的参数
      disposalStatus: this.$route.query.disposalStatus,
      disposalVisibleSYS: false,
      disposalConfirmVisibleSYS: false,
      disposalDetailsVisibleSYS: false,
      warningIdSYS: null,
      warningTypeSYS: null,
    };
  },
  components: {
    workSiteLeft,
    Disposal,
    DisposalConfirm,
  },
  created() {
    // this.getProjectList();
    // this.getList();
    this.getAnalysisList();
    this.handleQuery(this.queryParamsTwo.disposalStatus = this.disposalStatus);
  },
  watch: {
    multipleSelection(value) {
      console.log(value);
      this.cementDataList.forEach((b) => {
        b.isCheck = 0;
        value.forEach((a) => {
          if (a.id == b.id) {
            b.isCheck = 1;
          }
        });
      });
      console.log(this.cementDataList);
    },
    deep: true,
    immediate: true,
  },
  methods: {
    resetDisposalFormSYS() {
      this.disposalVisibleSYS = false
      this.warningIdSYS = null
      this.disposalConfirmVisibleSYS = false
      this.warningIdSYS = null
      this.disposalDetailsVisibleSYS = false
      this.warningIdSYS = null
    },
    closeFormSYS(){
      this.resetDisposalFormSYS()
    },
    closeConfirmSYS(){
      this.resetDisposalFormSYS()
    },
    closeDetailsSYS() {
      this.resetDisposalFormSYS()
    },
    //试验通知管理处置说明单
    addDisposal(row) {
      this.disposalVisibleSYS = true
      this.warningIdSYS = row.id
      this.warningTypeSYS = this.dict.type.warning_type[2].value
      this.$nextTick(() => {
        this.$refs.disposalSYS.title = "试验通知管理处置说明单";
        this.$refs.disposalSYS.form = {warningId:this.warningIdSYS,warningType:this.dict.type.warning_type[2].value};
        this.$refs.disposalSYS.dialogOpen = this.disposalVisibleSYS
        this.$refs.disposalSYS.getInfoByWarningId()
      })
    },
    //试验通知管理确认单
    ensureDisposal(row) {
      this.disposalConfirmVisibleSYS = true
      this.warningIdSYS = row.id
      this.$nextTick(() => {
        this.$refs.disposalConfirmSYS.title = "试验通知管理确认单";
        this.$refs.disposalConfirmSYS.form.warningId = this.warningIdSYS
        this.$refs.disposalConfirmSYS.form.warningType = this.dict.type.warning_type[2].value
        this.$refs.disposalConfirmSYS.disabled = true
        this.$refs.disposalConfirmSYS.dialogOpen = this.disposalConfirmVisibleSYS
        this.$refs.disposalConfirmSYS.getInfoByWarningId()
      })
    },
    // 试验通知管理撤回
    withdraw(row) {
      this.$confirm('确认撤回？').then(_ => {
        // 调用撤回接口
        const params = {
          operation: '1',
          status: 2,
          warningType: this.dict.type.warning_type[2].value,
          warningId: row.id
        }
        handleRevoke(params).then(res => {
          this.$message.success("撤回成功")
          this.getAnalysisList();
        }).catch(error =>{})
      })
      .catch(_ => {});
    },
    // 试验通知管理详情
    handleDetails(row) {
      this.disposalDetailsVisibleSYS = true
      this.warningIdSYS = row.id
      this.$nextTick(() => {
        this.$refs.disposalDetailsSYS.title = "试验通知管理详情";
        this.$refs.disposalDetailsSYS.form.warningId = this.warningIdSYS
        this.$refs.disposalDetailsSYS.form.warningType = this.dict.type.warning_type[2].value
        this.$refs.disposalDetailsSYS.disabled = true
        this.$refs.disposalDetailsSYS.detailsDisabled = true
        this.$refs.disposalDetailsSYS.dialogOpen = this.disposalDetailsVisibleSYS
        this.$refs.disposalDetailsSYS.details()
      })
    },
    /** 查询数据列表 */
    getList() {
      this.loading = true;
      alarmNotificationList(this.queryParams).then((response) => {
        this.cementDataList = response.rows;
        this.$nextTick(() => {
          response.rows.forEach((row) => {
            this.cementDataList.find((item) => {
              if (item.id == row.id && item.warnValLab == 1) {
                this.$refs.multipleTable.toggleRowSelection(item);
              }
            });
          });
        });
        this.total = response.total;
        this.loading = false;
      });
    },
    handleDeptId(val) {
      this.$set(this.queryParams, "id", val);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParamsTwo.pageNum = 1;
      // this.getList();
      this.getAnalysisList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs.workSiteLeft.resetQuery();
      this.resetForm("queryForm");
      this.resetForm("queryFormTwo");
      this.queryParamsTwo.id = ''
      this.queryParamsTwo.type = ''
      this.queryParamsTwo.disposalStatus = ''
      // this.$set(this.queryParamsTwo, "id", this.constructionList[0].id);
      // this.disposalVisibleSYS = false;
      this.handleQuery();
    },
    showLeft(show) {
      this.show = !show;
    },
    queryVal(val) {
      this.queryParams.id = val.id;
      this.queryParamsTwo.id = val.id;
      this.handleQuery();
    },
    // handleSelectionChange(val) {
    //   this.multipleSelection = val;
    // },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除？').then(() => {
        this.loading = true;
        return remove(ids);
      }).then(() => {
        this.loading = false;
        this.getAnalysisList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });
    },
    handleSave() {
      console.log(this.cementDataList);
      let obj = {
        type: 1,
        maps: [],
      };
      this.cementDataList.forEach((v) => {
        obj.maps.push({
          id: v.id,
          warnValLab: v.isCheck,
        });
      });
      nWarningUserMessageEdit(obj).then((res) => {
        console.log(res);
        this.$message.success("保存成功！");
      });
    },
    handleSend() { },
    handleAnalysis() {
      this.loadingTwo = true;
      warningSyList(this.queryParamsTwo).then((res) => {
        this.analysisList = res.rows;
        this.totalTwo = res.total;
        this.loadingTwo = false;
        this.analysisDialog = true;
      });
    },
    getAnalysisList() {
      this.loadingTwo = true;
      warningSyList(this.queryParamsTwo).then((res) => {
        this.analysisList = res.rows;
        this.totalTwo = res.total;
        this.loadingTwo = false;
      });
    },
  },
};
</script>
<style scoped lang="scss">
.app-testSheetImport {
  // padding-top: 16px;
  // user-select: none;
  .chartBox {
    height: 350px;
    width: 100%;
    position: relative;
  }

  .chartBoxHeight {
    height: 400px;
    width: 100%;
    position: relative;
  }

  .chartSearch {
    position: absolute;
    top: 0px;
    right: 60px;
  }
}
</style>

